<template>
  <div id="leftTop">
    <div class="carousel-tit-box">
      <div :class="active == index ? 'carousel-tit active' : 'carousel-tit'" v-for="(item, index) in titList"
        @click="switchCarousel(index)" :key="index">
        {{ item }}
      </div>
    </div>
    <el-carousel ref="carouselRef" indicator-position="none" :initial-index="active" :autoplay="true"
      :style="{ width: '100%', height: height - screenHeight * 40 / 1080 + 'px' }" @change="change">
      <el-carousel-item v-for="(item, index) in titList" :key="index" style="width: 100%;height: 100%;">
        <div class="map" :id="'lmEchart' + index"
          :style="{ width: lWidth + 'px', height: height - screenHeight * 40 / 1080 + 'px' }">
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
// import { equipmentRunCount } from "@/api/ops/dashboard";
import { data } from "./data"

export default {
  data() {
    return {
      mylmChart: 'lmEchart0',
      active: 0,
      titList: ['停车场', '人行出入口', '消控中心', '配电房', '水泵房'],
      lmoption: {
        grid: {
          left: 20,
          top: 15,
          bottom: 30,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          },
          axisLine: {//y轴轴线
            show: false
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          splitLine: {//去除网格线
            show: false
          },
          z: 10
        },
        yAxis: [{
          type: 'category',
          axisLine: {
            show: true
          },
          axisTick: {
            show: false,

          },
          axisLabel: {
            show: true,
            color: '#fff',
            fontSize: 16,
            // rotate: 15,
          },
          data: ['智能开关', '抽水泵', '水浮漂', '警铃', '水浸', '温湿度', 'AI监控', '监控', '巡检机器人']
        },
        {
          type: 'category',
          show: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
            color: '#fff'
          },
        },
        ],
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [

          {
            type: 'bar',
            yAxisIndex: 0,
            barMaxWidth: 30,
            itemStyle: {
              color: '#254d81',
              barBorderRadius: 50
            },
            data: [250, 192, 199, 264, 390, 390, 380, 129, 492],
            label: {
              formatter: "{c}%",
              right: '3%',
              show: true,
              textStyle: {
                fontSize: 14,
                color: '#fff'
              },
              position: "right"
            }
          },
          {
            type: 'bar',
            barMaxWidth: 30,
            yAxisIndex: 1,
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: '#82f2fd' },
                { offset: 0.5, color: '#79b3d8' },
                { offset: 1, color: '#2875b9' }
              ]),
              barBorderRadius: 50
            },
            // emphasis: {
            //   itemStyle: {
            //     color: this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
            //       { offset: 0, color: '#82f2fd' },
            //       { offset: 0.7, color: '#79b3d8' },
            //       { offset: 1, color: '#2875b9' }
            //     ])
            //   }
            // },
            data: [220, 182, 191, 234, 290, 330, 310, 123, 442],
            label: {
              formatter: "{c}%",
              show: true,
              textStyle: {
                fontSize: 14,
              },
            }
          },
        ]
      }
    };
  },
  props: {
    refreshNum: String,
    height: {
      type: Number,
      default: 100
    },
    screenHeight: {
      type: Number,
      default: 300
    },
    lWidth: {
      type: Number,
      default: 500
    },
  },
  watch: {
    refreshNum(val, oldVal) {
      // this.regionRank();
    }
  },
  created() { },
  destroyed() {
  },
  mounted() {
    this.init();
  },
  methods: {
    init(index = 0) {
      // console.log(5555555, document.getElementById(`lmEchart${index}`).style.width, this.lWidth);
      this.mylmChart = this.$echarts.init(
        document.getElementById(`lmEchart${index}`)
      );
      if (index == 0) {

      }
      const lmoption = JSON.parse(JSON.stringify(this.lmoption));
      lmoption.yAxis[0].data = data[index].yAxisLabel
      lmoption.series[0].data = data[index].seriesData1
      lmoption.series[1].data = data[index].seriesData2

      this.mylmChart.setOption(lmoption);
    },
    // 切换
    switchCarousel(index) {
      this.$refs.carouselRef.setActiveItem(index)
      this.active = index;
      this.init(index);
    },
    // change
    change(index) {
      // console.log(6666666, e);
      this.active = index;
      this.init(index);
    },
  }
};
</script>

<style lang="scss">
#leftTop {
  width: 100%;

  .carousel-tit-box {
    display: flex;
    justify-content: space-between;
    height: 0.5508rem;
    align-items: center;
    width: 98%;
    margin: 0 auto;

    .carousel-tit {
      width: 20%;
      text-align: center;
      background-image: url("~@/assets/background/btn2-1.svg");
      background-size: 100% 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.18rem;
      color: #374B87;
      cursor: pointer;

      &.active {
        background-image: url("~@/assets/background/btn2.svg");
        color: #fff;
      }
    }

  }

  .el-carousel__container {
    height: 100%;
  }

  .scrollbar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(44, 88, 166, 0.9);
    background: #535353;
  }

  .scrollbar::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(26, 60, 102, 0.9);
    border-radius: 5px;
    background: transparent;
  }
}
</style>
